
<template>
  <div>
    <div class="app-container">
      <h-table-list
        border
        :show-header="false"
        type="local"
        :page-sizes="[10, 20]"
        :data="deal_message.messageList"
        @size-change="handleSizeChange"
        :columns="columns"
        :paginationInfo="paginationInfo"
        :form-options="formOptions"
      >
        <div class="deal-message-button">
          <el-button @click="readAll" type="primary">全部已读</el-button>
          <el-button @click="removeAll" type="primary">清空消息</el-button>
        </div>
        <template slot="operate-column" slot-scope="scope">
          <div>
            <div :class="!scope.row.status ? 'circle-12' : ''" />
            <span class="message-date">{{
              scope.row.createdTime | formatDate
            }}</span>
          </div>
          <div>{{ scope.row.title }}</div>
          <div>{{ scope.row.message }}</div>
          <div>
            <el-button type="text" @click="() => detail(scope.row)"
              >查看详情</el-button
            >
            <el-button type="text" @click="() => deleteMessage(scope.row)"
              >删除消息</el-button
            >
          </div>
        </template>
      </h-table-list>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import waves from "@/directive/waves"; // waves directive
import DownloadIdentify from "@/components/FormDialog";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import ListOpearteButton from "@/components/AllButton/button2";
import tableButton from "@/components/AllButton/button3";
import data from "./const";
import { parseTime, listTotree } from "@/utils";
const weekObj = {
  1: "星期日",
  2: "星期一",
  3: "星期二",
  4: "星期三",
  5: "星期四",
  6: "星期五",
  7: "星期六",
};
export default {
  name: "deal_message",
  components: {
    DownloadIdentify,
    Pagination,
    tableButton,
    ListOpearteButton,
  },
  directives: { waves },
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
  },
  data() {
    return {
      time: [[new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]],
      //  timeString: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      dialogFormVisible: false,
      loadList: false,
      showPwd: false,
      ruleForm: {
        users: [],
        scheduleName: "",
      },

      paginationInfo: {
        sizeChange: (e) => {
          console.log(e);
        },
        currentChange: (e) => {
          this.getList({ current: e });
        },
        current: 1,
        total: 10,
      },
      formOptions: {
        inline: true,
        submitBtnText: "查询",
        showResetBtn: false,
        showSearchBtn: false,
        searchParamsHandler: (params) => {
          console.log("查询");
        },
        changevalue: (params) => {
          console.log(params);
          this.$store.dispatch("deal_message/setListSearchParams", params);
        },
        resetBtnCallback: () => {
          this.$store.dispatch("deal_message/setListSearchParams", {});
          this.getList(this.$store.state.deal_message.listSearchParams);
        },
        forms: [],
      },
      columns: [
        {
          prop: "operate",
          label: "操作",
          minWidth: "100%",
          // minWidth: 180,
          slotName: "operate-column",
          //fixed: "right",
        },
      ],

      dateData: [
        { weekType: weekObj[1] },
        { weekType: weekObj[2] },
        { weekType: weekObj[3] },
        { weekType: weekObj[4] },
        { weekType: weekObj[5] },
        { weekType: weekObj[6] },
        { weekType: weekObj[7] },
      ],
      tableData: [],
    };
  },

  watch: {
    formChange: () => {},
  },
  computed: {
    ...mapState(["deal_message", "app"]),
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      await this.$store.dispatch("deal_message/requestMessageList");
      this.$set(
        this.paginationInfo,
        "total",
        this.$store.state.deal_message.messageTotal
      );
    },
    async readAll() {
      this.$store.dispatch("deal_message/readAllMessage").then((res) => {
        this.getList();
      });
    },
    async removeAll() {
      this.$store.dispatch("deal_message/removeAllMessage").then((res) => {
        this.getList();
      });
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    deleteMessage(row) {
      console.log(row);
      this.$confirm(`确认删除？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store
            .dispatch("deal_message/deleteDeviceInfo", row.id)
            .then((response) => {
              // this.$message({
              //   type: "success",
              //   message: "删除成功!",
              // });
              this.getList();
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    detail(row) {
      console.log(row);
      if (row) {
        this.$store.dispatch("deal_message/hasRead", row);
        localStorage.setItem(row.webJumpUrl, row.sourceBillId);
        this.$router.push(row.webJumpUrl);
      }
    },
  },
};
</script>
<style >
.deal-message-button {
  padding: 20px 0;
}
.message-date {
  font-weight: bold;
}
</style>

